<template>
  <p-card :bordered="false" class="containent">
    <div class="table-page-search-wrapper wrap1">
      <p-row type="flex" :gutter="24">
        <p-col flex="auto">
          <p-form-model layout="inline" :model="topForm" :rules="rules">
            <p-row :gutter="24">
              <p-col :xl="8" :md="12">
                <p-form-model-item label="条码扫描">
                  <p-input placeholder="请输入" @change="changScan"></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="线体">
                  <p-select
                    v-model="topForm.lineno"
                    @change="changeLine"
                    allowClear
                  >
                    <p-select-option
                      v-for="item in lines"
                      :key="item.codeValue"
                      :value="item.codeValue"
                      >{{ item.textValue }}</p-select-option
                    >
                  </p-select>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="工站">
                  <p-tree-select
                    v-model="topForm.stationCode"
                    :tree-data="stations"
                    :dropdown-style="{ maxHeight: '500px' }"
                    tree-node-filter-prop="title"
                    show-search
                    allow-clear
                    tree-default-expand-all
                    @change="changeHandler"
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </p-col>
        <p-col style="padding-top: 2px;">
          <p-button type="primary" @click="path('/work/datacollect/Processkey')"
            >关键件采集</p-button
          >
          <p-button
            type="primary"
            style="margin: 0 10px 0 10px"
            @click="path('/work/datacollect/Packaging')"
            >包装采集</p-button
          >
          <p-button type="primary" @click="path('/work/datacollect/Startaging')"
            >老化采集</p-button
          >
        </p-col>
      </p-row>
      <div class="table-operator text-right">
        <p-radio-group
          :value="currentView"
          button-style="solid"
          @change="setCurrentView"
        >
          <p-radio-button value="spot-check">开线点检</p-radio-button>
          <p-radio-button value="sop">SOP</p-radio-button>
          <p-radio-button value>数据采集</p-radio-button>
          <p-radio-button value="first-check">首检</p-radio-button>
          <p-radio-button value>工序采集</p-radio-button>
          <p-radio-button value>生产异常</p-radio-button>
          <p-radio-button value>工序交接</p-radio-button>
          <p-radio-button value>在线送修</p-radio-button>
        </p-radio-group>
      </div>
      <div class="content">
        <div class="tab">
          <!-- 表格标签 -->
          <p-row type="flex" justify="space-between">
            <p-col>
              <span style="display: block; font-weight: 800; margin-bottom: 5px"
                >条码信息</span
              >
            </p-col>
          </p-row>
          <!-- 关键数量模块 -->
          <p-row type="flex" justify="space-between">
            <p-col :span="9">
              <div class="left_list">
                <p-form :layout="horizontal">
                  <p-form-item>
                    <p-input placeholder="显示当前SN" v-model="SN" />
                  </p-form-item>
                  <p-form-item>
                    <p-input placeholder="显示当前工序工单" />
                  </p-form-item>
                </p-form>
              </div>
            </p-col>
            <p-col
              :span="14"
              style="
                height: 230px;
                border: 1px solid #eee;
                line-height: 40px;
                padding: 10px 20px 0px 20px;
              "
            >
              <!-- 右上侧Table区域 -->
              <p-form layout="inline">
                <p-row :gutter="24">
                  <p-col :xl="12">
                    <p-form-item label="工序单号">
                      <p-input readOnly v-model="form.processBillNo"></p-input>
                    </p-form-item>
                  </p-col>
                  <p-col :xl="12">
                    <p-form-item label="产品编码">
                      <p-input readOnly v-model="form.productcode"></p-input>
                    </p-form-item>
                  </p-col>
                  <!-- <p-col :xl="6">
                    <p-form-item label="产品描述">
                      <p-input readOnly v-model="form.productname"></p-input>
                    </p-form-item>
                  </p-col>
                  <p-col :xl="6">
                    <p-form-item label="工单数量">
                      <p-input readOnly v-model="form.planQty"></p-input>
                    </p-form-item>
                  </p-col> -->
                </p-row>
              </p-form>
              <div style="height: 45px">
                <p-alert
                  v-if="visible"
                  message="条码采集成功"
                  type="success"
                  closable
                  :after-close="handleClose"
                />
              </div>
              <div>
                <p-col :span="8" style="padding: 0px 20px">
                  <p-row :span="24">
                    <div class="num">
                      <div class="num_item">已加工数量</div>
                      <div class="num_item">
                        {{ GDdetail.qualified || 0 }}
                      </div>
                    </div>
                  </p-row>
                </p-col>
                <p-col :span="8" style="padding: 0px 20px">
                  <p-row :span="24">
                    <div class="num" style="background: #999999">
                      <div class="num_item">待加工数量</div>
                      <div class="num_item">{{ GDdetail.pending || 0 }}</div>
                    </div>
                  </p-row>
                </p-col>
                <p-col :span="8" style="padding: 0px 20px">
                  <p-row :span="24">
                    <div class="num" style="background: #ff0000">
                      <div class="num_item">不合格数量</div>
                      <div class="num_item">
                        {{ GDdetail.unqualified || 0 }}
                      </div>
                    </div>
                  </p-row>
                </p-col>
              </div>
            </p-col>
          </p-row>
          <!-- 底部采集表格 -->
          <p-row
            type="flex"
            justify="space-between"
            style="margin-top: 20px"
            class="bottom-form"
          >
            <!-- 左表 -->
            <p-col
              span="9"
              style="height: 100%; display: flex; flex-direction: column"
            >
              <p-row type="flex" justify="space-between">
                <span
                  style="display: block; font-weight: 800; margin-bottom: 5px"
                  >完成列表</span
                >
                <p-button type="primary" @click="toBind">容器绑定</p-button>
              </p-row>
              <div class="caiji">
                <p-table
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :scroll="tableScroll"
                  :pagination="false"
                  :columns="columns"
                  :dataSource="bindrecordData"
                  :loading="loading"
                  @change="handleTableChange"
                />
              </div>
            </p-col>
            <!-- 右表 -->
            <p-col
              span="14"
              style="height: 100%; display: flex; flex-direction: column"
            >
              <span style="display: block; font-weight: 800; margin-bottom: 5px"
                >历史数据</span
              >
              <!-- <span style="border:1px solid #eee;display:inline-block;padding:4px;border-bottom:0;border-right:0">绑定记录</span>
                <span style="border:1px solid #eee;display:inline-block;padding:4px;border-bottom:0">关键件替换记录</span>-->
              <div class="bangding">
                <p-table
                  ref="table"
                  size="middle"
                  bordered
                  rowKey="id"
                  :columns="columns1"
                  :dataSource="bindrecordData"
                  :loading="loading"
                  :scroll="tableScroll"
                  @change="handleTableChange"
                  :pagination="false"
                />
              </div>
            </p-col>
          </p-row>
        </div>
      </div>
    </div>
  </p-card>
</template>

<script>
import { api } from "@/api/manage";
import { filterObj, timestampToDatetime } from "@/utils/util";
import Vue from "vue";
import { postAction, getAction, deleteAction } from "@/api/manage";
import ReplaceModal from "./modules/ReplaceModal";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import Order from "@/views/work/productionExecution/components/order.vue";
import mixins from "./modules/line-station";

const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "工序工单 ",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "SN/PN",
    align: "center",
    dataIndex: "pnsn",
  },
  {
    title: "数量",
    align: "center",
    dataIndex: "collectionQty",
  },
];
//历史记录表头
const Binding_record = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "工站",
    align: "center",
    dataIndex: "stationName",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品描述",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "SN",
    align: "center",
    dataIndex: "pnsn",
  },
];
//关键件替换记录表头
export default {
  name: "Processcode",
  mixins: [mixins],
  // mixins: [JeecgListMixin],
  components: {
    ReplaceModal,
    Order,
  },
  data() {
    return {
      url: {
        list: "/mes-craft/craft/mesPeProcessRoute/list",
        delete: "/mes-craft/craft/mesPeProcessRoute/delete",
        deleteBatch: "/mes-craft/craft/mesPeProcessRoute/deleteBatch",
        exportXlsUrl: "/mes-code/mesBcTemplate/export",
        // importExcelUrl: '/mes-code/auto/mesBcTemplate/importExcel',
        getColumns: "/mes-code/online/cgform/api/getColumns/",
        buttonAction: "/mes-code/online/cgform/api/doButton",
        setGxtmData: "/mes-manufacture/mfWip/barCodeCollection", //保存条码信息
        getHistory: "/mes-manufacture/mfWip/getBarCodeCollectionHistory", //获得工序工单采集列表
        getGZ: "/mes-craft/craft/mesPeDefinition/getAllStation", //获取工站
        getDetail: "/mes-manufacture/mfStartWork/getQtybyProcessBillId", //获得加共详情
      },
      bd: "bind",
      gj: "e",
      size: "a",
      columns: [], //完成列表
      columns1: [], //右下角表
      bindrecordData: [],
      SN: "",
      form: {
        id: "",
        processBillNo: "",
        planQty: null,
        unit: "",
        productcode: "",
        productname: "",
        starttime: null,
        processTwoCode: "",
        productType: null,
        inspectFlag: null,
        billnoStatus: null,
        processVersion: "",
        processCoding: "",
        startworkButtonFlag: false,
        processType: 1,
        produceBillNo: "",
      },
      selectedRowKeys: [], //选中的key
      selectionRows: [], //选中的record
      loading: false,
      GDdetail: {
        qualified: "",
        pending: "",
        unqualified: "",
      },
      tableScroll: {
        // y: "100%",
      },
      visible: false,
    };
  },
  watch: {
    SN: function (Val) {
      if (Val) {
        this.setGxtm();
      }
    },
    form: function () {
      this.getHistory();
      this.getDetail();
    },
  },
  created() {
    this.columns = columns;
    this.columns1 = Binding_record;
  },
  mounted() {
    this.getStations();
    this.getLines();
  },
  methods: {
    post(s) {
      this.form = s;
    },
    changHandler(val) {
      let item = this.stationList.filter((items) => items.processmcode == val);
      this.stationName = item[0].processmname;
    },
    // onSelectChange(selectedRowKeys, selectionRows) {
    //   this.selectedRowKeys = selectedRowKeys;
    //   this.selectionRows = selectionRows;
    // },
    //获得加工详情
    getDetail() {
      let params = {
        processBillId: this.form.id,
      };
      getAction(this.url.getDetail, params).then((res) => {
        if (res.success) {
          this.GDdetail = res.data;
        }
      });
    },
    //保存工序条码
    setGxtm() {
      if (this.form.processBillNo) {
        let params = {
          pnsn: this.SN,
          processbillNo: this.form.processBillNo,
          stationCode: this.topForm.stationCode,
          stationName: this.topForm.stationName,
          processbillId: this.form.id,
          productionNo: this.form.productionNo,
          collectionQty: 1,
          codeType: 1,
          routeCode: this.form.processCoding,
          routeVersion: this.form.processVersion,
        };
        postAction(this.url.setGxtmData, params).then((res) => {
          if (!res.success) return this.$message.warning(res.msg);
          if (res.data) {
            // this.$message.success(res.msg);
            this.visible = true;
            setTimeout(() => {
              this.handleClose();
            }, 2000);
            this.getHistory();
            this.getDetail();
          } else {
            this.$message.warning("采集失败");
          }
        });

        // .finally(() => {
        //   this.loading = false;
        // });
      } else {
        this.$message.warning("请先选择工序工单");
      }
    },
    //获取工站
    //获取历史数据
    getHistory() {
      let params = {
        processbillId: this.form.id,
        processbillNo: this.form.processBillNo,
        stationCode: this.topForm.stationCode,
      };
      this.loading = true;
      postAction(this.url.getHistory, params).then((res) => {
        if (res.success) {
          this.bindrecordData = res.data;
        }
        this.loading = false;
      });
    },
    //跳转容器绑定界面
    toBind() {
      this.$router.push({
        path: "/work/datacollect/Containerbind",
        query: {
          data: this.form.processBillNo,
          lineno: this.topForm.lineno,
          stationCode: this.topForm.stationCode,
        },
      });
    },
    handleClose() {
      this.visible = false;
    },
    changScan(e) {
      this.SN = e.target.value;
    },
  },
};
</script>
<style lang='less' scoped>
.containent {
  height: 100%;
  /deep/ .poros-card-body {
    height: 100%;
  }
  .wrap1 {
    flex-direction: column;
    display: flex;
    height: 100%;
    .topnav {
      display: flex;
      justify-content: space-between;
      .topsearch {
        flex: 1;
      }
      .btn_list {
        padding-top: 2px;
        padding-left: 24px;
      }
    }
  }
}
.content {
  flex: 1;
  display: flex;
  overflow: hidden;
  .list1 {
    width: 340px;
    // height: 100%;
  }
  .tab {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    .bottom-form {
      flex: 1;
      height: 100%;
      overflow: hidden;
      .caiji {
        height: 100%;
        overflow: auto;
        border: 1px solid #eee;
        padding: 10px;
      }
      .bangding {
        height: 100%;
        overflow: auto;
        border: 1px solid #eee;
        padding: 10px;
      }
    }
    .left_list {
      height: 230px;
      border: 1px solid #eee;
      line-height: 40px;
      padding: 25px 20px;
    }
  }
}

.poros-alert {
  text-align: center;
}
/deep/.poros-alert-message {
  color: rgb(103, 194, 58);
  font-size: 18px;
}
.operator {
  margin-top: 50px;
}
.operator .poros-btn {
  float: right;
  margin-left: 10px;
}
.num {
  background: #409eff;
  height: 70px;
  border-radius: 5px;
  color: #fff;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.num .num_item {
  font-size: 20px;
  font-weight: 500;
  height: 30px;
}
</style>